<template>
  <div
  ref="vantaRef"
    class="w3l-signinform"
  >
    <!-- container -->
    <div class="wrapper">
      <!-- main content -->
      <div style="width:47%;
            margin-left: 1.25%;
            margin-right: 1.25%;
            margin-top: 8em;
            color: #fff;
            float: left;
            display: inline;">
            <h1 >智慧物流监测平台</h1>

            <h3>———依托精准温控、智能技术，打造”互联网+医药物流“供应链综合服务平台，做全程可视、透明化、综合型供应链服务的领军企业</h3>
      </div>
      
      <div class="w3l-form-info">
        <!-- logo -->
        <div class="w3_info">
          <!-- <h2 style="text-align: center">智慧物流监测平台</h2> -->
          
          <el-card shadow="always" class="card">
          <img class="page-login--logo" :src="siteLogo" width="250"/>
            <el-tabs v-model="activeName">
            
              <el-tab-pane label="账号密码登录" name="first" stretch>

                <span slot="label"><span style="margin: 30px;color: #2a1d47 !important">账号密码登录</span></span>
                <br/>
                <el-form
                  ref="loginForm"
                  label-position="top"
                  :rules="rules"
                  :model="formLogin"
                  size="default"
                >
                  <el-form-item prop="username">
                    <el-input
                      type="text"
                      v-model="formLogin.username"
                      prefix-icon="el-icon-user-solid"
                      placeholder="用户名"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      type="password"
                      v-model="formLogin.password"
                      prefix-icon="el-icon-s-promotion"
                      show-password
                      placeholder="密码"
                      @keyup.enter.native='submit'
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    prop="captcha"
                    v-if="captchaState"
                    :rules="{required: true,message: '请输入验证码',trigger: 'blur'}"
                  >
                    <el-input
                      type="text"
                      v-model="formLogin.captcha"
                      placeholder="验证码"
                      @keyup.enter.native="submit"
                    >
                      <template slot="append">
                        <img
                          alt="请检查后端是否正常~~"
                          class="login-code"
                          style="cursor: pointer;width:145px;height: 33px;"
                          height="33px"
                          width="145px"
                          slot="suffix"
                          :src="image_base"
                          @click="getCaptcha"
                        />
                      </template>
                    </el-input>
                  </el-form-item>
                </el-form>
                <el-row v-if="isTenant && isPublic">
                  <el-col :span="11">
                    <button class="btn btn-primary btn-block" style="padding: 10px 10px;background-color:#2a1d47 !important;color:#fff !important;" @click="submit">登录</button>
                  </el-col>
                </el-row>
                <button v-else class="btn btn-primary btn-block" style="padding: 10px 10px;background-color:#2a1d47 !important;color:#fff !important;" @click="submit">登录</button>
                <component v-if="componentTag" :is="componentTag"></component>
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <!-- footer -->
          <div class="footer">
            <p>Copyright &copy; 松冷(武汉)科技有限公司</p>
          </div>
          <!-- footer -->
        </div>
      </div>
      <!-- //main content -->
    </div>
    <!-- //container -->
    <!-- <el-dialog title="快速选择用户" :visible.sync="selectUsersDialogVisible" width="400px" append-to-body>
      <el-row :gutter="10" style="margin: -20px 0px -10px 0px">
        <el-col v-for="(user, index) in users" :key="index" :span="8">
          <div class="page-login--quick-user" @click="handleUserBtnClick(user)">
            <d2-icon name="user-circle-o"/>
            <span>{{ user.name }}</span>
          </div>
        </el-col>
      </el-row>
    </el-dialog> -->
  </div>
</template>
<script>
import base from './base.vue'
import * as THREE from 'three'
import halo from "vanta/dist/vanta.halo.min"

const pluginImport = require('@/libs/util.import.plugin')

export default {
  extends: base,
  name: 'page',
  data () {
    return {
      activeName: 'first',
      componentTag: ''
    }
  },
  created () {
    // 注册第三方登录插件
    var componentTag = ''
    try {
      componentTag = pluginImport('dvadmin-third-web/src/login/index')
    } catch (error) {
      componentTag = ''
    }
    this.componentTag = componentTag
  },
  mounted () {
    this.vantaEffect = halo({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      baseColor: 0xebde0,
      backgroundColor: 0x2a1d47,
      amplitudeFactor: 3.00,
      xOffset: -0.27,
      yOffset: -0.40,
      size: 3.00
    })
  },
  methods: {},
  beforeDestroy(){
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import './css/style.css';

  .copyrights {
    text-indent: -9999px;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
  }

  // 快速选择用户面板
  .page-login--quick {
    margin-top: 20px;
  }

  .page-login--quick-user {
    @extend %flex-center-col;
    padding: 10px 0px;
    border-radius: 4px;

    &:hover {
      background-color: $color-bg;

      i {
        color: $color-text-normal;
      }

      span {
        color: $color-text-normal;
      }
    }

    i {
      font-size: 36px;
      color: $color-text-sub;
    }

    span {
      font-size: 12px;
      margin-top: 10px;
      color: $color-text-sub;
    }
  }
  .page-login--logo{
    position: static;
    margin: 0 auto;
    display: block
  }
</style>
